<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery - JavaScript</title>
    <style>

    </style>
</head>
<body>
    <h1>jQuery</h1>
    <p>
        jQuery 是一个 JavaScript 库。
        jQuery 极大地简化了 JavaScript 编程。
        jQuery 简化了选择器等写法，浏览器兼容好。
    </p>

    <h4>学习目标</h4>
    <ol>
        <li>了解jquery原理</li>
        <li>熟悉jquery常见方法使用</li>
        <li>手册：https://www.runoob.com/jquery/jquery-tutorial.html</li>
    </ol>

    <script type="text/javascript">

        // -----------------------------
        // 0. jquery是什么？为什么要有jquery？
        // -----------------------------



        // -----------------------------
        // 1. 加载jquery的两种方式
        // -----------------------------
        /*
            远程加载：
                未压缩：https://cdn.staticfile.org/jquery/3.5.1/jquery.js
                已压缩：http://cdn.staticfile.org/jquery/3.5.1/jquery.min.js
            本地加载
         */
        // 1.1 打印$对象和jQuery对象，查看原型链。



        // -----------------------------
        // 2. 文档就绪
        // -----------------------------
        /*
            $(document).ready(function(){
               // 开始写 jQuery 代码...
            });

            简洁写法：
            $(function(){
               // 开始写 jQuery 代码...
            });
         */
        // 2.1 文档就绪是什么样一个情况？和window.onload有啥不一样的吗？


        // -----------------------------
        // 3. jquery选择器
        // -----------------------------
        /*
            标签选择器：$("p")
            id选择器：$("#id")
            类选择器：$(".class")
            选取所有 name 属性值等于 "password" 的 <input> 元素：$("input[name='password']")
         */
        // 3.1 之前怎么获取页面标签元素的？


        // -----------------------------
        // 4. jquery获取和设置属性
        // -----------------------------
        /*
            设置属性：$("#runoob").attr("href", "https://www.runoob.com");
            获取属性：$("#runoob").attr("href");

            获取表单元素值：$("#username").val();
            设置表单元素值：$("#username").val("庄周");

            获取单选框和复选框选中状态：$("checkbox").prop("checked");
            单选框和复选框控制选中：$("checkbox").prop("checked", "checked");
         */
        // 4.1 获取和设置属性相当于之前的哪种写法？
        // 4.2 pop和attr有啥不一样的？



        // -----------------------------
        // 5. jquery获取和设置样式
        // -----------------------------
        /*
            设置样式：$("div").css("background-color");
            获取样式：$("div").css("background-color", "yellow");

            隐藏：$("div").hide();
            显示：$("div").show();
         */
        // 5.1 获取和设置样式相当于之前的哪种写法？



        // -----------------------------
        // 6. jquery获取和设置元素内的内容
        // -----------------------------
        /*
            设置文本内容：$("div").text("hello jquery");
            获取文本内容：$("div").text();

            设置html内容：$("div").html("<b>hello jquery</b>");
            获取html内容：$("div").html();
         */
        // 6.1 获取和设置元素内的内容相当于之前的哪种写法？



        // -----------------------------
        // 7. jquery获取父节点和子节点
        // -----------------------------
        /*
            获取父元素：$("div").parent()
            获取子元素：$("div").children()

            查找p子元素：$("div").find("p")
         */
        // 7.1 获取父节点和子节点相当于之前的哪种写法？



        // -----------------------------
        // 8. jquery创建元素、增加元素和删除元素
        // -----------------------------
        /*
            创建元素；$("<p></p>").text("段落");

            在被选元素的结尾插入内容：$("div").append("html内容")
            在被选元素的开头插入内容：$("div").prepend("html内容")
            在被选元素之后插入内容：$("div").after("html内容")
            在被选元素之前插入内容：$("div").before("html内容")

            删除元素：$("#div1").remove();
            删除子元素：$("#div1").empty();
            删除指定元素：$("p").remove(".del");
         */
        // 8.1 获取父节点和子节点相当于之前的哪种写法？
        // 8.2 尝试使用上面相关的方法并观察。


        // -----------------------------
        // 9. jquery事件
        // -----------------------------
        /*
            定义按钮点击事件： $("button").click(function(){
                                // 动作触发后执行的代码!!
                            });
            调用按钮点击事件： $("button").click();

            绑定一个方法：$("#btn").bind("click", function(){
                            alert("这个按钮被点击了。");
                        });

            使用on方法绑定事件：$("#btn").on("click", function(){
                            alert("这个按钮被点击了。");
                        });
            使用off方法移除事件：$("#btn").off("click");
         */
        // 9.1 对比js的原生事件。
        // 9.2 尝试使用上面相关的方法并观察。



        // ----------------------------------------------------
        // -- 练习
        // ----------------------------------------------------
        // 1. 尝试查询jquery官网，并了解jquery最新版本是？
        // 2. 下载jquery脚本文件，并在项目中引入。
        // 3. 查看：网页列表.html，实现jquery实现相关功能。


    </script>

</body>
</html>